<script setup lang="ts">
import provinceList from '@/static/data/region.json';
import { MultiSelectorPickerOnChange, MultiSelectorPickerOnColumnchange } from '@uni-helper/uni-app-types';
import { computed, ref, watch } from 'vue';

// 读取props
const props = defineProps<{
    provinceCode?: string
    cityCode?: string
    countyCode?: string
    fullLocation?: string
}>();

// 向外事件触发
const emit = defineEmits<{
    change: [fullLocation: string]
}>();

// 初始化区域值
const provinceValue = ref(0);
const cityValue = ref(0);
const countyValue = ref(0);

// 初始化选项列表
const cityList = computed(() => provinceList[provinceValue.value].areaList);
const countyList = computed(() => cityList.value[cityValue.value].areaList);

// 根据props更新内部数据
watch(props, ({ provinceCode, cityCode, countyCode, fullLocation }) => {
    const location = fullLocation?.split(' ');
    const initProvinceValue = () => {
        // 采用provinceCode
        if (provinceCode) {
            const index = provinceList.findIndex(p => p.code === provinceCode);
            if (index !== -1) return index;
        }
        // 采用fullLocation
        if (location) {
            const index = provinceList.findIndex(p => p.name === location[0]);
            if (index !== -1) return index
        }
        // 默认值
        return 0;
    };
    const initCityValue = () => {
        // 采用cityCode
        if (cityCode) {
            const index = cityList.value.findIndex(c => c.code === cityCode);
            if (index !== -1) return index;
        }
        // 采用fullLocation
        if (location) {
            const index = cityList.value.findIndex(c => c.name === location[1]);
            if (index !== -1) return index;
        }
        // 默认值
        return 0;
    };
    const initCountyValue = () => {
        // 采用countyCode
        if (countyCode) {
            const index = countyList.value.findIndex(c => c.code === countyCode);
            if (index !== -1) return index;
        }
        // 采用fullLocation
        if (location) {
            const index = countyList.value.findIndex(c => c.name === location[2]);
            if (index !== -1) return index;
        }
        // 默认值
        return 0;
    };
    provinceValue.value = initProvinceValue();
    cityValue.value = initCityValue();
    countyValue.value = initCountyValue();
}, { immediate: true });

// 单列数据变化
const onColumnChange: MultiSelectorPickerOnColumnchange = ({ detail: { column, value } }) => {
    switch (column) {
        case 0:
            provinceValue.value = value;
            cityValue.value = 0;
            countyValue.value = 0;
            break;
        case 1:
            cityValue.value = value;
            countyValue.value = 0;
            break;
        case 2:
            countyValue.value = value;
            break;
    }
};

// 提交变化
const onChange: MultiSelectorPickerOnChange = () => {
    emit('change', `${provinceList[provinceValue.value].name} ${cityList.value[cityValue.value].name} ${countyList.value[countyValue.value].name}`);
};

// 向外展示区域编码
defineExpose({
    provinceCode: computed(() => provinceList[provinceValue.value].code),
    cityCode: computed(() => cityList.value[cityValue.value].code),
    countyCode: computed(() => countyList.value[countyValue.value].code),
});
</script>

<template>
    <picker class="picker" mode="multiSelector" range-key="name" :range="[provinceList, cityList, countyList]"
        :value="[provinceValue, cityValue, countyValue]" @columnchange="onColumnChange" @change="onChange">
        <slot>
            <text>请选择地区</text>
        </slot>
    </picker>
</template>

<style lang="scss">
.picker {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>